<template>
  <div>
      <h3>饮料主页面</h3>
       <table border="1" style="margin :0 auto;" width=500>
           <tr>
               <th>饮料编号</th>
               <th>饮料厂家</th>
               <th>饮料牌子</th>
               <th>饮料味道</th>
               <th>价格</th>
               <th>操作</th>
               <th>修改</th>
           </tr>
           <tr v-for="(item,i) in drinkList" :key="i">
               <td>{{item.id}}</td>
               <td>{{item.producer}}</td>
               <td>{{item.drink_name}}</td>
               <td>{{item.taste}}</td>
               <td>{{item.price}}</td>
               <td><button @click="remove(i)">删除</button></td>
               <td><button @click="xiu(i)">修改</button></td>
           </tr>
       </table>


       <p>添加</p>
       <p>饮料牌子:<input type="text" v-model="name"></p>
       <p>饮料味道:<input type="text" v-model="taste"></p>
       <p>价格:<input type="text" v-model="price"></p>
        <p>饮料厂家:
           <select name="producer" v-model="producer">
               <option v-for="(item,i) in producerList" :key="i" :value="item.id">{{item.pro_name}}</option>
           </select>
       </p>
       <p><button @click="add">添加</button></p>



       <p>修改</p>
       <p>饮料牌子:<input type="text" v-model="name1"></p>
       <p>饮料味道:<input type="text" v-model="taste1"></p>
       <p>价格:<input type="text" v-model="price1"></p>
        <p>饮料厂家:
           <select name="producer" v-model="producer1">
               <option v-for="(item,i) in producerList" :key="i" :value="item.id">{{item.pro_name}}</option>
           </select>
       </p>
       <p><button @click="update">确认修改</button></p>
  </div>
</template>

<script>
// import {get,del,post,put} from '../../utils/request'
export default {
    name:'Drink',
    data(){
        return{
            drinkList:[],
            producerList:[],

            name:'',
            taste:'',
            price:0,
            producer:1,

            name1:'',
            taste1:'',
            price1:0,
            producer1:1,
        }
    },
    mounted(){
        this.GetDrinkData();
        this.GetProData();
    },
    methods:{
        GetDrinkData(){
            this.$axios.get('drink2/').then(resp=>{
                console.log(resp);
                this.drinkList=resp.data;
            }).catch(err=>{
                console.log(err);
            })
        },
        remove(i){
            let url = 'drink/' +this.drinkList[i].id +'/'
            this.$axios.del(url).then(resp=>{
                console.log(resp);
                this.GetDrinkData();
                alert('删除成功')
            }).catch(err=>{
                console.log(err);
            })
        },
        add(){
            let obj={drink_name:this.name,taste:this.taste,price:this.price,producer:this.producer}
            this.$axios.post('drink/',obj).then(resp=>{
                console.log(resp);
                this.GetDrinkData();
                alert('添加成功')
            }).catch(err=>{
                console.log(err);
            })
        },
        GetProData(){
            this.$axios.get('pro/').then(resp=>{
                console.log(resp);
                this.producerList=resp.data;
            }).catch(err=>{
                console.log(err);
            })
        },
        xiu(i){
            this.id = this.drinkList[i].id;
            this.name1 = this.drinkList[i].drink_name;
            this.price1 = this.drinkList[i].price;
            this.taste1 = this.drinkList[i].taste;
        },
        update(){
            let url ='drink/' +this.id +'/';
            let obj={drink_name:this.name1,taste:this.taste1,price:this.price1,producer:this.producer1}
            this.$axios.put(url,obj).then(resp=>{
                console.log(resp);
                this.GetDrinkData();
                alert('修改成功')
            }).catch(err=>{
                console.log(err);
            })
        }
    }

}
</script>

<style>

</style>